<template>
<div>
  <el-radio-group v-model="labelPosition" size="medium">
    <el-radio-button label="left">左对齐</el-radio-button>
    <el-radio-button label="right">右对齐</el-radio-button>
    <el-radio-button label="top">顶部对齐</el-radio-button>
  </el-radio-group>
  <div style="margin: 20px;"></div>
  <el-form ref="form" :model="form" label-width="80px" size="medium" :label-position="labelPosition" :rules="rules">
    <el-form-item label="作业名称" prop="name">
      <el-input v-model="form.name" multiple placeholder="请输入作业名称" size="medium" maxlength="10" show-word-limit style="width: 580px"></el-input>
    </el-form-item>
    <el-form-item label="班级" prop="classIdList">
      <el-select v-model="form.classIdList" multiple placeholder="请选择班级" style="width: 280px">
        <el-option
          v-for="classes in classList"
          :key="classes.id"
          :label="classes.classname"
          :value="classes.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="截止时间" prop="deadline">
      <el-date-picker
        v-model="form.deadline" style="width: 280px"
        type="datetime"
        placeholder="选择日期时间"
        default-time="12:00:00">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="作业内容" prop="content">
      <el-input type="textarea" v-model="form.content" multiple placeholder="请输入作业内容" autosize maxlength="400" show-word-limit style="width: 780px"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit('form')">立即发布</el-button>
      <el-button @click="resetForm('form')">重置</el-button>
    </el-form-item>
  </el-form>
</div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      labelPosition: 'right',
      classList: [],
      teacherName: '',
      form: {
        name: '',
        deadline: '',
        classIdList: [],
        content: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入作业名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        datdeadlinee: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        classIdList: [
          { required: true, message: '请选择作业发布的班级', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请填写作业内容', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getClassList()
    this.getTeacherName()
  },
  methods: {
    onSubmit (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          var jsonObj = {"name": this.form.name, "teacherName": this.teacherName, "content": this.form.content, "deadline": this.form.deadline, "classIds": this.form.classIdList}
          axios.post('http://127.0.0.1:8091/work/addWork', jsonObj).then((res) => {
            if (res && res.info === 0) {
              this.$router.push({name: 'result'})
            }
          }).catch().finally(
            this.resetForm(form)
          )
        } else {
          this.$message.error('参数错误')
          return false
        }
      })
    },
    getClassList () {
      axios.get('http://127.0.0.1:8091/class/' + this.$store.state.user.id).then(({data}) => {
        this.classList = data && data.errCode === 0 ? data.info : []
      }).catch().finally()
    },
    resetForm (form) {
      this.$refs[form].resetFields()
    },
    getTeacherName () {
      axios.get('http://127.0.0.1:8091/admin/getTeacherName/' + this.$store.state.user.name).then(({data}) => {
        this.teacherName = data && data.errCode === 0 ? data.info : this.$store.state.user.name
      })
    }
  }
}
</script>

<style scoped>

</style>
